<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <title>数据绑定</title>
    <style>
        #para{
        	color:green;
        }
    </style>
</head>
<body>
<div id="app">
<div class="container">
    <div class="col-md-12">
        <form action="http://localhost:8764/hello3" method="post">
            <div class="form-group">
                <label for="username">用户名称:</label>
                <input type="text" class="form-control" placeholder="用户名称"
                       id="username" name="username" v-model="username" >
            </div>
            <div class="form-group">
                <label for="age">年龄:</label>
                <input type="text" class="form-control" placeholder="输入整数"
                       id="age" name="age" v-model="age">
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
    <label>使用JSON参数绑定提交到 /hello4 </label>
    <!-- `greet` 是在下面定义的方法名 -->
    <button @click="greet" class="btn btn-primary">异步提交JSON数据</button>
    <p>获取响应数据</p>
    <li v-for="m in msg" >{{m}}</li>
</div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            username: 'Tom',
            age: 18,
            msg: []
        },

        methods: {
            greet: function(){
                 console.log(this.username);
                 axios.post('http://localhost:8764/hello4', {'username': this.username,
                    'age': this.age
                    })
                  .then(function (response) {
                    this.vm.msg.push(response.data);
                    console.log(response.data);
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
            }
        }
       })


</script>
</body>
</html>